<!-- 三级下拉菜单组件 -->
<template>
    <el-card>
        <!-- 三级下拉菜单 -->
        <el-form :inline="true">
            <el-form-item label="一级分类" style="width:28%">
                <el-select :disabled="scene == 0 ? false : true" placeholder="请选择" v-model="CategoryStore.c1id"
                    @change="handler()">
                    <!-- option-label即为显示文字 value属性即为select下拉菜单收集的数据 -->
                    <el-option v-for="(c1, index) in CategoryStore.c1Arr" :key="c1.id" :label="c1.name"
                        :value="c1.id"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="二级分类" style="width:28%">
                <el-select :disabled="scene == 0 ? false : true" placeholder="请选择" v-model="CategoryStore.c2id"
                    @change="handler1()">
                    <el-option v-for="(c2, index) in CategoryStore.c2Arr" :key="c2.id" :label="c2.name"
                        :value="c2.id"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="三级分类" style="width:28%">
                <el-select :disabled="scene == 0 ? false : true" placeholder="请选择" v-model="CategoryStore.c3id">
                    <el-option v-for="(c3, index) in CategoryStore.c3Arr" :key="c3.id" :label="c3.name"
                        :value="c3.id"></el-option>
                </el-select>
            </el-form-item>
        </el-form>
    </el-card>
</template>

<script setup lang="ts">

import { onMounted } from 'vue';
import useCategoryStore from '@/store/modules/category';
// 接收父组件传递的数据
defineProps(['scene'])
let CategoryStore = useCategoryStore();
onMounted(() => {
    getC1();
})
const getC1 = () => {
    CategoryStore.getC1()
}
const handler = () => {
    // CategoryStore.c3id='';
    CategoryStore.c2id = '';
    CategoryStore.c3Arr = [];
    CategoryStore.c3id = '';
    CategoryStore.getc2();
}
const handler1 = () => {
    CategoryStore.c3id = '';
    CategoryStore.getc3();
}
</script>

<style scoped></style>